<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Basic</h1>
    <table align="center" border="1" width="200">
        <tr>  <th> &lt;!DOCTYPE html&gt;</th> <th>&lt;html lang="en"&gt;</th> <th>&lt;meta charset="UTF-8"&gt;</th>  </tr>
        <tr> 
            <td>文档类型声明，告诉浏览器使用哪种HTML版本来显示网页，必须写在页面第一行。文档类型声明标签，不属于HTML标签。</td>
            <td>lang:language,en:english。zh-CN则是中文网页，en则为英文网页。但也可以显示其他语言。</td>
            <td>charset字符集，常用值：GB2312,BIG5 ,GBK,UTF-8(万国码)</td>
        </tr>
    </table>
    <h1>常用标签</h1>
    <p>
        1. &lt;h1&lt;~&lt;h2&lt; 作为标题使用，每个标题独占一行<br/>
        2. &lt;p&lt; 段落标签，段落之间有较大空隙<br/>
        3.  &lt;br/ &lt; 换行标签单标签<br/>
        4. 文本格式化标签：a.加粗：&lt;strong&gt;或&lt;b&gt;  b.倾斜：&lt;em&gt;或&lt;i&gt; c.删除：&lt;del&gt;或&lt;s&gt; d.下划线：&lt;ins&gt;或&lt;u&gt; <br/>
        5. &lt;div&gt;和&lt;span&gt;  eg: <br/>
            <span>This is a span.一行可以有多个span小盒子</span>
            <div>This is a div.用来布局，一行只能由一个大盒子</div>
            <br/>
        6. 图像标签与路径：&lt;img&gt; 注意：插入图片前，要先将图片放入HTML同层文件夹；属性要写在img之后；属性之间不分前后顺序；属性之间用空格隔开；值用""包括。<br/>
           <img src = "pic_attributes.png">
           宽度高度一般修改一个就可以了，另一个会自动缩放。<br/>
        7. （**重点）超链接：&lt;a&gt; 从一个页面跳到另一个页面 ；target: _self默认，_blank新窗口打开；#表示空链接 <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;a. 语法格式: &lt;a href="跳转目标" target="目标窗口的弹出方式"&gt;文本或者图像&lt;/a&gt; <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;b. 如果href里面地址是一个文件或者压缩包，会下载这个文件。地址链接的是文件.exe或.zip等压缩包形式。<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;c. 文本，图像，表格，音频等都可以被添加超链接，例如：<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="http://www.baidu.com"&gt;&lt;img src ="img.jpg"/&gt;&lt;/a&gt;
        &nbsp;&nbsp;&nbsp;&nbsp;d. 锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。<br>
        8. 注释标签：ctrl+/ 
        9. 特殊字符：<img src="special_char.png">
    </p>
    <h1>表格标签</h1>
    <h2>主要作用：</h2>
    <p>表格不是用于布局页面，而是用于展示数据的</p>
    <h2>基本语法：</h2>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
        <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
        <tr> <td>刘德华</td> <td>男</td> <td>56</td> </tr>
    </table>
    <p>
        1. 表头单元格&lt;th&gt;：一般位于单元格的第一行，第一列，表头单元格里面的文本内容加粗居中显示 <br/>
        2. 表格属性：颜色，边框一般通过CSS设置 <br/>
        <img src="t_attributes.png">
        <br/>
        3. 合并单元格？
    
    </p>
    <h1>列表标签</h1>
    <p>特点：整齐，整洁，有序</p>
    <img src="exa_list.png">
    <h2>重点：无序列表, li标签中可以放任意标签，字典样式黑点</h2>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>
    <h2>有序列表：</h2>
    <ol>
        <li>！！！</li>
        <li>？？？</li>
    </ol>
    <h2>自定义列表：</h2>
    <p>使用场景：大哥领小弟，用于对名词的解释，没有任何项目符号</p>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
    <dl>
        <h1>表单：</h1>
    <img src="eam.png">
    <img src="exam2.png">
    <p>组成：表单域 + 表单元素</p>
    <form>
        <lable for="tt">用户名：</lable> <input type="text" name="username" maxlength="6" id="tt"> <br />
        密码：<input type="password" name="password"> <br />
        性别：<label for="nan">男</label> <input id="nan" type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br />
        爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby" > 打豆豆<input type="checkbox" name="hobby">
        上传头像：<input type="file">
        <input type="radio" id="nan"><lable for="nan">男</lable>
    </form>
    <form>
        籍贯：
        <select>
            <option>山东</option>
            <option selected="selected">四川</option>
        </select>
    </form>
    
    <h3>天气练习页面：</h3>
    <a href="天气.html">天气联系页面</a>
    
</body>
</html>